<template>
    <div class="li-icon">
        <div :class="icons" :style="styles"></div>
    </div>
</template>

<script lang="ts" setup>
import { computed } from 'vue';
import { isHexColor } from '@/libs/commont';

const props = defineProps({
    //
    icon: {
        type: String,
        default: ''
    },
    //
    size: {
        type: [String, Number],
        default: '30'
    },
    //
    color: {
        type: String,
        default: '#555555'
    }
});

const styles = computed(() => {
    let style = {
        fontSize: '30px',
        color: '#555555'
    };
    if (typeof props.size == 'number') {
        style['fontSize'] = props.size + 'px';
    } else if (typeof props.size == 'string') {
        style['fontSize'] = props.size.indexOf('px') >= 0 ? props.size : props.size + 'px';
    }

    if (isHexColor(props.color)) style['color'] = props.color;
    return style;
});
const icons = computed(() => {
    return props.icon.indexOf('iconfont') >= 0 ? props.icon : `iconfont ${props.icon}`;
});
</script>

<style lang="less" scoped>
.li-icon {
}
</style>
